<template>
  <div class="index">
    
    <!-- 添加动画 -->
    <transition name="fade" mode="out-in">
      <!-- 二级路由占位 -->
      <router-view></router-view>
    </transition>

    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" route to="/index/home">首页</van-tabbar-item>
        <van-tabbar-item icon="search" route to="/index/tuan">抱抱团</van-tabbar-item>
        <van-tabbar-item icon="star-o" route to="/index/order">订单</van-tabbar-item>
        <van-tabbar-item icon="friends-o" route to="/index/mine">我的</van-tabbar-item>
    </van-tabbar>

  </div>
  
</template>

<script>


export default {
    data(){
        return {
            active: 0,
        }
    }
}
</script>

<style>
*{
  margin: 0;padding: 0;
}
  a{
    text-decoration: none;
    color: #333;
  }
  .tabbar{
    background-color: #fff;
    width: 100%;
    height: 50px;
    border-top: 1px solid #333;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-around;
    line-height: 50px;
  }
  .router-link-active{
    color: coral;
  }

  /* 入场动画 */
.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  transition: all .2s;
}
.fade-enter-to{
  opacity: 1;
}

/* 离场动画 */
.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: all .2s;
}
.fade-leave-to{
  opacity: 0;
}
</style>
